<template>
  <div class="switch-box">
    <div
      v-for="(item, idx) in tabs"
      :key="idx"
      :class="idx === active && 'active'"
      @click="changeActive(idx)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      active: 1,
      tabs: ["企业", "非企业性单位", "个人"],
    };
  },
  watch: {
    value(newData) {
      this.active = newData;
    },
    active(newData) {
      this.$emit("input", newData);
      console.log(newData);
    },
  },
  methods: {
    changeActive(idx) {
      this.active = idx;
    },
  },
};
</script>

<style lang="scss" scoped>
.switch-box {
  display: flex;
  div {
    padding: 0 5px;
  }
}
.active {
  color: skyblue;
}
</style>